<template>
  <div class="airspaceApplication">
    <div class="container">
      <div class="down-container">
        <el-table
          :data="tableData"
          header-cell-class-name="table_header"
          stripe
          :border="true"
        >
          <el-table-column :label="$t('alarmRescue.operate')" align="center">
            <template #default="scope">
              <el-button link type="primary" @click="handleDetail(scope.row)">{{
                $t("alarmRescue.detail")
              }}</el-button>
              <el-button link type="primary" @click="handleUpdate(scope.row)">{{
                $t("alarmRescue.update")
              }}</el-button>
              <el-button link type="primary" @click="handleUnEble(scope.row)">
                <span v-if="scope.row.status === 1">{{
                  $t("alarmRescue.enable")
                }}</span>
                <span v-if="scope.row.status === 0">{{
                  $t("alarmRescue.deactivate")
                }}</span>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('alarmRescue.alarmType')"
            prop="alartType"
          >
            <template #default="{ row }">
              {{ filtersAlartType(row) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('alarmRescue.AlarmMethod')"
            prop="monitoringAlartMethod"
          >
            <template #default="{ row }">
              {{ filtersMonitoring(row) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('alarmRescue.flyingAlartMethod')"
            prop="flyingAlartMethod"
          >
            <template #default="{ row }">
              {{ filtersflyingAlart(row) }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('alarmRescue.status')" prop="status">
            <template #default="{ row }">
              <span class="tag success" v-if="row.status === 0">{{
                $t("alarmRescue.openEnable")
              }}</span>
              <span class="tag" v-if="row.status === 1">{{
                $t("alarmRescue.deactivate")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('alarmRescue.updateTime')"
            prop="updateTime"
          ></el-table-column>
        </el-table>
        <pagination
          style="margin-top: 10px"
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getAlarmList"
          class="pagination"
        />
      </div>
    </div>
    <!--  报警详情/报警编辑  弹窗  -->
    <el-dialog
      class="addAlarmVisible"
      v-model="dialogVisibleDetail"
      title=""
      width="26%"
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      top="16vh"
    >
      <template #header>
        <div class="title">{{ alarmTitle }}</div>
      </template>
      <el-form :model="alarmData" ref="addAlarmRef" :rules="rules">
        <el-form-item
          :label="$t('alarmRescue.alarmType') + ':'"
          prop="alartType"
        >
          <el-select
            v-model="alarmData.alartType"
            :disabled="alarmDisabled"
            :placeholder="$t('alarmRescue.dimensionAlartType')"
            clearable
          >
            <el-option
              v-for="dict in alartTypeList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('alarmRescue.AlarmMethod') + ':'"
          prop="monitoringAlartMethod"
        >
          <el-select
            v-model="alarmData.monitoringAlartMethod"
            :disabled="alarmDisabled"
            :placeholder="$t('alarmRescue.dimensionAlarmMethod')"
            clearable
          >
            <el-option
              v-for="dict in monitoringAlarList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('alarmRescue.flyingAlartMethod') + ':'"
          prop="flyingAlartMethod"
        >
          <el-select
            v-model="alarmData.flyingAlartMethod"
            :disabled="alarmDisabled"
            :placeholder="$t('alarmRescue.dimensionFlyingAlartMethod')"
            clearable
          >
            <el-option
              v-for="dict in flyingAlartList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('alarmRescue.alarmStauts') + ':'"
          prop="status"
        >
          <el-select
            v-model="alarmData.status"
            :disabled="alarmDisabled"
            :placeholder="$t('alarmRescue.dimensionStatus')"
            clearable
          >
            <el-option
              v-for="dict in statusSwitch"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('alarmRescue.remark') + ':'">
          <el-input
            v-model="alarmData.remark"
            :disabled="alarmDisabled"
            :placeholder="$t('alarmRescue.dimensionRemark')"
            show-word-limit
            style="height: 100px"
            maxlength="150"
            :rows="3"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div v-if="!onlyViewable">
            <el-button @click="dialogVisibleDetail = false">{{
              $t("alarmRescue.cancel")
            }}</el-button>
            <el-button
              style="background: #2bc17b; color: #ffffff"
              @click="addAlarmConfirm(addAlarmRef)"
            >
              {{ $t("alarmRescue.confirm") }}
            </el-button>
          </div>
          <div v-else>
            <el-button @click="dialogVisibleDetail = false">{{
              $t("alarmRescue.return")
            }}</el-button>
          </div>
        </div>
      </template>
    </el-dialog>

    <!--  启用/停用  -->
    <el-dialog
      v-model="enableDialogVisible"
      title=""
      width="26%"
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      top="1vh"
    >
      <img v-if="enable" src="@/assets/images/enable.png" alt="" />
      <img v-else src="@/assets/images/prohibit.png" alt="" />
      <template #footer>
        <div class="dialog-footer">
          <div style="margin-bottom: 30px; font-size: 14px; color: #333333">
            <span>{{ $t("alarmRescue.determineDeactivate") }}</span>
            <span v-if="enable">{{ $t("alarmRescue.enable") }}</span>
            <span v-else>{{ $t("alarmRescue.deactivate") }}</span>
            <span style="color: rgba(255, 195, 0, 1)">{{ alarmName }}</span>
            <span>{{ $t("alarmRescue.doubt") }}</span>
          </div>
          <el-button @click="dialogVisibleFun(0)">{{
            $t("alarmRescue.cancel")
          }}</el-button>
          <el-button
            style="background: #2bc17b; color: #ffffff"
            @click="dialogVisibleFun(1)"
          >
            {{ $t("alarmRescue.confirm") }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="alarmSetUp">
import { onMounted, reactive, ref, toRefs, computed } from "vue";
import { ElFormItem, ElInput } from "element-plus";
import {
  getList,
  getAlartDetail,
  updateAlart,
} from "@/api/alarmRescue/alarmSetup";
import { getDicts } from "@/api/system/dict/data";
import { getCurrentInstance } from "vue";
import useMqttStore from "@/store/modules/mqttInfo";

const { $t } = getCurrentInstance().proxy;
const dialogVisibleDetail = ref(false);
const alarmTitle = ref("");
const onlyViewable = ref(false);
const addAlarmRef = ref();
const alarmDisabled = ref(false);
const enableDialogVisible = ref(false);
const enable = ref(false);
const alarmName = ref("");
const mqttStore = useMqttStore();

const statusSwitch = [
  {
    label: "启用",
    value: 0,
  },
  {
    label: "停用",
    value: 1,
  },
];

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  alarmData: {
    alartType: "",
    monitoringAlartMethod: "",
    flyingAlartMethod: "",
    status: "",
    remark: "",
  },
  tableData: [],
  rules: {
    alartType: [{ required: true, message: "请输入空域类型", trigger: "blur" }],
    monitoringAlartMethod: [
      { required: true, message: "请选择监控席报警方式", trigger: "change" },
    ],
    flyingAlartMethod: [
      { required: true, message: "请选择飞手报警方式", trigger: "change" },
    ],
    status: [{ required: true, message: "请选择报警状态", trigger: "change" }],
  },
  alartTypeList: [],
  monitoringAlarList: [],
  flyingAlartList: [],
});
let obj = {};

const {
  queryParams,
  alarmData,
  tableData,
  rules,
  alartTypeList,
  monitoringAlarList,
  flyingAlartList,
} = toRefs(data);

const total = ref(0);

function filtersAlartType(val) {
  let label = "";
  alartTypeList.value.map((item) => {
    if (item.dictValue == val.alartType) {
      label = item.dictLabel;
    }
  });
  return label;
}

function filtersMonitoring(val) {
  let label = "";
  monitoringAlarList.value.map((item) => {
    if (item.dictValue == val.monitoringAlartMethod) {
      label = item.dictLabel;
    }
  });
  return label;
}

function filtersflyingAlart(val) {
  let label = "";
  flyingAlartList.value.map((item) => {
    if (item.dictValue == val.flyingAlartMethod) {
      label = item.dictLabel;
    }
  });
  return label;
}

// 详情
function handleDetail(val) {
  dialogVisibleDetail.value = true;
  onlyViewable.value = true;
  alarmTitle.value = $t("alarmRescue.alarmDetail");
  alarmDisabled.value = true;
  getDetail(val);
}

function getDetail(val) {
  getAlartDetail(val.alarmId).then((res) => {
    if (res.code === 200) {
      alarmData.value = res.data;
      alarmData.value.alartType = alarmData.value.alartType + "";
      alarmData.value.monitoringAlartMethod =
        alarmData.value.monitoringAlartMethod + "";
      alarmData.value.flyingAlartMethod =
        alarmData.value.flyingAlartMethod + "";
    }
  });
}

// 编辑
function handleUpdate(val) {
  dialogVisibleDetail.value = true;
  onlyViewable.value = false;
  alarmTitle.value = $t("alarmRescue.updateAlarmSet");
  alarmDisabled.value = false;
  getDetail(val);
}

// 启用/停用
function handleUnEble(val) {
  alartTypeList.value.map((item) => {
    if (item.dictValue == val.alartType) {
      alarmName.value = item.dictLabel;
    }
  });
  enable.value = val.status == 1 ? true : false; // true--启用   false--停用
  enableDialogVisible.value = true;
  obj = val;
}

function dialogVisibleFun(val) {
  if (val == false) {
    enableDialogVisible.value = false;
  } else {
    console.log(obj);
    let params = {
      alarmId: obj.alarmId,
      alartType: obj.alartType,
      flyingAlartMethod: obj.flyingAlartMethod,
      monitoringAlartMethod: obj.monitoringAlartMethod,
      remark: obj.remark,
      status: enable.value ? 0 : 1,
    };
    updateAlart(params).then((res) => {
      if (res.code === 200) {
        enableDialogVisible.value = false;
        getAlarmList();
      }
    });
  }
}

const addAlarmConfirm = async (addAlarmRef) => {
  if (!addAlarmRef) return;
  await addAlarmRef.validate((valid, fields) => {
    if (valid) {
      let params = {
        alarmId: alarmData.value.alarmId,
        alartType: alarmData.value.alartType,
        flyingAlartMethod: alarmData.value.flyingAlartMethod,
        monitoringAlartMethod: alarmData.value.monitoringAlartMethod,
        remark: alarmData.value.remark,
        status: alarmData.value.status,
      };
      updateAlart(params).then((res) => {
        if (res.code === 200) {
          dialogVisibleDetail.value = false;
          getAlarmList();
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 获取列表信息
function getAlarmList() {
  getList(queryParams.value).then((res) => {
    if (res.code === 200) {
      tableData.value = res.rows;
      total.value = res.total;
    }
  });
  // 将报警状态存储于仓库
  mqttStore.getAlarmType();
}

async function getDict() {
  await getDicts("alart_info_type").then((res) => {
    // alartType--告警类型
    if (res.code === 200) {
      alartTypeList.value = res.data;
    }
  });
  await getDicts("alart_info_method").then((res) => {
    // monitoringAlartMethod--监控席报警方式
    if (res.code === 200) {
      monitoringAlarList.value = res.data;
    }
  });
  await getDicts("alart_info_flying").then((res) => {
    // flyingAlartMethod--飞手警告方式
    if (res.code === 200) {
      flyingAlartList.value = res.data;
    }
  });
}

onMounted(() => {
  getAlarmList();
  getDict();
});
</script>
<style lang="scss" scoped>
.airspaceApplication {
  width: 100%;
  height: 100%;

  .container {
    position: relative;
    width: calc(100% - 40px);
    height: 92%;
    margin: 0 20px 20px;
    border-radius: 10px;
    background: white;

    .pagination {
      position: absolute;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
    }

    .down-container {
      background-color: #ffffff;
      border-radius: 4px;
      height: 94%;

      :deep .table_header {
        color: #333333;
        font-size: 16px;
        font-weight: 400;
        font-family: PingFang SC;
      }

      // 表格内背景颜色
      :deep .el-table td {
        border: 0px;
        color: #333333; // 修改字体颜色
        font-size: 14px;
      }

      .tag {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 15px;
        color: rgba(153, 153, 153, 1);
        border: 1px solid rgba(153, 153, 153, 1);
      }
      .tag.warning {
        color: rgba(255, 149, 18, 1);
        border: 1px solid rgba(255, 149, 18, 1);
      }
      .tag.success {
        color: rgba(43, 193, 123, 1);
        border: 1px solid rgba(43, 193, 123, 1);
      }
    }

    :deep .el-table__footer-wrapper,
    .el-table__header-wrapper {
      background-color: #f4f4f4;
      height: 56px;
    }

    :deep .el-table__header {
      height: 100%;
      background-color: #f4f4f4;
    }

    :deep .el-table .el-table__cell {
      text-align: center;
    }

    :deep .el-table__row {
      height: 60px;
    }

    :deep .el-table tr {
      height: 56px;
    }
  }
  .addAlarmVisible {
    width: 559px;
    height: 484px;
    position: relative;
    top: 20%;

    .colorFullBox {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      background-color: rgba(43, 193, 123, 0.3);
    }

    .colorLineBox {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      border: 1px #2bc17b solid;
    }

    .createBtn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 26px;
      width: 98px;
      height: 36px;
      font-size: 12px;
      box-sizing: border-box;
      border-radius: 4px;
      color: rgba(43, 193, 123, 1);
      background: rgba(51, 151, 255, 0.03);
      border: 1px solid rgba(43, 193, 123, 1);
      cursor: pointer;
      margin-left: 12px;
      &:hover {
        background: rgba(51, 151, 255, 0.1);
      }
    }

    .title {
      height: 100%;
      background-color: #2bc17b;
      color: #ffffff;
      text-align: left;
      padding: 15px 28px;
      font-size: 18px;
      letter-spacing: 1px;
    }
  }

  :deep .el-dialog__headerbtn {
    position: absolute;
    top: 3px;
    right: 0;
    padding: 0;
    width: 54px;
    height: 54px;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 31px;
    color: #ffffff;
  }

  :deep .el-dialog:not(.is-fullscreen) {
    margin-top: 36vh !important;
  }

  :deep .el-dialog__body {
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0px calc(var(--el-dialog-padding-primary) + 5px) 20px !important;
  }

  :deep .el-dialog:not(.is-fullscreen) {
    margin-top: 16vh !important;
  }

  :deep .el-dialog__header {
    padding: 0;
    margin: 0;
    height: 12%;
  }

  :deep .el-textarea__inner {
    height: 100%;
    resize: none;
  }

  :deep .el-dialog__body {
    padding: 25px 30px 5px !important;
  }

  :deep .el-form {
    width: 100%;
  }

  :deep .el-select {
    width: 100%;
  }

  :deep .el-form-item--default .el-form-item__label {
    width: 19%;
    color: #666666;
    font-weight: 400;
    font-size: 14px;
    text-align: right;
    line-height: 1.3;
    margin: 5px 0 -2px 0;
  }

  :deep .el-dialog__headerbtn .el-dialog__close{
    color: #ffffff;
  }
}
</style>
